var vie_races = vie_fwk_base_page.extend({
    initialize: function(options){
        this.initVars(options);
        this.pageHeadModel.setToolbarId(this.getContainerId());
        $('a#current-section').html('Races');
        if(this.options.race != null){
            this.pageHeadModel.set('title', 'View Race');
            this.pageHeadModel.set('description', '');
            this.collection = __app.colls.races.where({id:this.options.car});
        }else{
            this.pageHeadModel.set('title', '');
            this.pageHeadModel.set('description', '');
            this.collection = __app.colls.races;
            this.collection.bind('add create', this.addItem, this);
        }
        this.pageHeadModel.addButton('icon-plus', 'Add A Race', '#races/edit');
    },
    render: function(){
        this.pageBody = new vie_races_list({collection: this.collection});
        this.displayToMain();
        return this;
    },
    addItem: function(race){
        this.pageBody.addItem(race);
    } 
});

var vie_races_list = vie_fwk_base_list.extend({
    attributes: {
        id: 'cars-list'
    },
    initialize: function(){
    },
    render: function(){
        $(this.el).html('');
        this.listItemView = vie_race;
        this.renderList();
        return this;    
    },
    addItem: function(model){
        var listItemView = new this.listItemView({model: model});
        this.listItemViews[model.get('id')] = listItemView;
        $(this.el).prepend(listItemView.render().el)
    }
});

var vie_race = vie_fwk_base.extend({
    tagName: 'li',
    className: 'span4',
    attributes: {},
    events: {
        "click a": "actionRequest"
    },
    delUrl: null,
    editUrl: null,
    template: null,
    initialize: function(){
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.destroy_view, this);
        this.template = _.template(templateLoader.templates['tpl-item']);
        this.dateFormat = 'ddd mmm dd yyyy';
    },
    setEditUrl: function(){
        this.editUrl = '#races/edit/' + this.model.get('id');
    },
    setDelUrl: function(){
        this.delUrl = '#races/remove/' + this.model.get('id');
    },
    render: function(){
        this.setDelUrl();
        this.setEditUrl();
        $(this.el).attr('id', 'races-list-item-' + this.model.get('id'));
        var modelJSON = this.model.toJSON();
        var itemData = {
            //image: {src: 'img/260x180.gif', alt: 'placeholder'},
            heading: this.model.get('name'),
            body: this.getRaceBody(),
            buttons: new Array()
        };
        itemData.buttons.push({
            label: 'edit',
            url: this.editUrl
        });
        itemData.buttons.push({
            label: 'delete',
            url: this.delUrl
        });
        
        $(this.el).html(this.template(itemData));
        return this;
    },
    getRaceBody: function(){
        var dateMod = new Date(this.model.get('dateMod')).format(this.dateFormat);
        var dateCreate = new Date(this.model.get('dateCreate')).format(this.dateFormat);
        var raceDate = new Date(this.model.get('date')).format(this.dateFormat);
        var entries = __app.colls.race_entries.where({race: this.model.get('id')});
        var raceBody = '<p>Race venue: ' + this.model.get('venue') + '</p>';
        raceBody += '<p>Race date: ' + raceDate + '</p>';
        raceBody += '<p>Race entries: ' + 'entries to follow' + '</p>';
        raceBody += '<button type="button" class="btn btn-primary btn-block" data-toggle="collapse" data-target="#details-'+this.model.get('id')+'">';
        raceBody += 'details';
        raceBody += '</button>';
        raceBody += '<div id="details-'+this.model.get('id')+'" class="collapse">'
            raceBody += '<table class="table table-striped">';
                raceBody += '<tbody>';
                    // raceBody += '<tr>';
                        // raceBody += '<td>';
                            // raceBody += 'entries:';
                        // raceBody += '</td>';
                        // raceBody += '<td>';
                        // //TODO: add the entries here
                            // raceBody += '<p>' + 'entries to follow' + '</p>';
                        // raceBody += '</td>';
                    // raceBody += '</tr>';
                    
                    // raceBody += '<tr>';
                        // raceBody += '<td>';
                            // raceBody += 'date:';
                        // raceBody += '</td>';
                        // raceBody += '<td>';
                            // raceBody += raceDate;
                        // raceBody += '</td>';
                    // raceBody += '</tr>';
                    
                    raceBody += '<tr>';
                        raceBody += '<td>';
                            raceBody += 'notes:';
                        raceBody += '</td>';
                        raceBody += '<td>';
                            raceBody += this.model.get('note');
                        raceBody += '</td>';
                    raceBody += '</tr>';
                    
                    raceBody += '<tr>';
                        raceBody += '<td>';
                            raceBody += 'type:';
                        raceBody += '</td>';
                        raceBody += '<td>';
                            raceBody += '<p>' + this.model.get('type').label + '</p>';
                            raceBody += '<p>' + this.model.get('type').desc + '</p>';
                        raceBody += '</td>';
                    raceBody += '</tr>';
                    
                    // raceBody += '<tr>';
                        // raceBody += '<td>';
                            // raceBody += 'venue:';
                        // raceBody += '</td>';
                        // raceBody += '<td>';
                            // raceBody += '<p>' + this.model.get('venue') + '</p>';
                        // raceBody += '</td>';
                    // raceBody += '</tr>';
                    
                    raceBody += '<tr>';
                        raceBody += '<td>';
                            raceBody += 'result:';
                        raceBody += '</td>';
                        raceBody += '<td>';
                            raceBody += '<p>' + this.model.get('result').label + '</p>';
                        raceBody += '</td>';
                    raceBody += '</tr>';
    //                 
                    // raceBody += '<tr>';
                        // raceBody += '<td>';
                            // raceBody += 'created:';
                        // raceBody += '</td>';
                        // raceBody += '<td>';
                            // raceBody += dateCreate;
                        // raceBody += '</td>';
                    // raceBody += '</tr>';
    //                 
                    // raceBody += '<tr>';
                        // raceBody += '<td>';
                            // raceBody += 'updated:';
                        // raceBody += '</td>';
                        // raceBody += '<td>';
                            // raceBody += dateMod;
                        // raceBody += '</td>';
                    // raceBody += '</tr>';
                raceBody += '</tbody>';
            raceBody += '</table>';
        raceBody += '</div>';
        return raceBody;
    },
    actionRequest: function(ev){
        if($(ev.currentTarget).attr('href') == this.delUrl){
            //temporary
            return confirm('are you sure you want to delete this car?');
                
        }
    }
});